<template>
  <div id="GrassDynamic">
    <div class="header">
      <span class="title">{{datas.title}}</span>
      <router-link :to="datas.url+'?show=true'" class="more" style="position: relative;">更多>></router-link>
    </div>
    <div class="ul-div">
      <ul class="dynamic-ul">
        <li class="dynamic-li select">工商联组织</li>
        <li class="dynamic-li unselect">商会组织</li>
      </ul>
    </div>
    <div class="list">
      <ul>
        <li v-for="item in datas.list" v-bind:key="item.id">
          <router-link v-bind:key="item.id" :to="{path:datas.url+'/NewsInfo?id='+item.id}" id="tolink">
          <a v-html="item.title"></a>
          <span>[{{item.date}}]</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import baseConfig from 'baseConfig'
import $ from 'jquery'

export default {
  name: 'GrassDynamic',
  props: {
    datas: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return baseConfig.news
      }
    }
  },
  methods:{
    /* 设置导航栏选中状态 */
    navSelectHandle () {
      let _this = this;
      $('.dynamic-li').each(function (index, dom) {
        $(this).click(function () {
          let dom = $('.dynamic-li');
          dom.removeClass('select');
          dom.removeClass('unselect');
          dom.css("background-color", "#3F8ADB");
          $(this).css("background-color", "#1f52a3");

          if ($(this) !== dom) {
            let type = $(this)[0].innerHTML;
            _this.$emit('change', type);
          }
        })
      })
    }
  },
  mounted () {
    this.navSelectHandle()
  }
}
</script>

<style scoped lang="scss">
  @import 'publicLib/scss/defualtScss.scss';
  ul li{
    list-style: none;
  }
  #GrassDynamic{
    height: 20rem;
    border: #D6D6D6 0.05rem solid;
    background-color: white;
    padding: 0 1rem;

    .select{
      background-color: $contect-us-color;
    }

    .unselect{
      background-color: $more-title-color;
    }

    .header{
      position: relative;
      height: 62px;
      display: flex;
      align-items: center;
      color: $contect-us-color;
      font-size: 1.1rem;
      border-bottom: #D6D6D6 0.25rem solid;

      .title{
        display: inline-block;
        height: 62px;
        width: 142px;
        font-weight: bold;
        float: left;
        line-height: 62px;
        text-align: left;
      }

      .more{
        display:inline-block;
        width:370px;
        height: 62px;
        line-height: 62px;
        font-size: 1rem;
        text-align: right;

        /*<!--right:-20rem;-->*/
        cursor: pointer;
      }
    }

    .ul-div{
      margin:0.5rem auto;
      color: white;

      .dynamic-ul{
        width: 100%;
        margin: 0 1.5rem;
      }

      li {
        list-style: none;
        float: left;
        font-size: 1.1rem;
        padding: 0.5rem 5rem;
        cursor: pointer;
        margin-right: 1rem;
      }
    }

    .list{
      line-height: 2.6rem;
      font-size: $font-size-normol;
      color: $data-detail-font-color;
      clear: both;
      overflow:hidden;

      ul{
        height:13.1875rem;
        text-align: left;
        padding-left: 1rem;
        overflow:hidden;
      }

      li{
        line-height: 3rem;
        border-bottom: #D6D6D6 0.09rem dashed;
        position: relative;

        a{
          display: block;
          width: 28rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;

          color: #58585c;

          &:hover{
            color: red;
          }
        }

        &:hover{
          color: red;
        }

        span:nth-child(2){
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
  }

</style>

